<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox">
  <div class="contain">
    <button class="btn btn-primary" @click="addStu">添加学员信息</button>
    <table class="table">
      <caption>学员信息表</caption>
      <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>电话</th>
        <th>email</th>
        <th>班级</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in stuList">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.age}}</td>
        <td>{{item.telephone}}</td>
        <td>{{item.email}}</td>
        <td>
          <p v-for="i in classesList">
            <span v-if="i.id==item.classid">{{i.name}}</span>
          </p>
          </td>
      </tr>
      </tbody>
    </table>

    <!--模态框-->
    <div class="modal" id="mymodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button @click="hideModal" class="close" type="button">&times;</button>
            <div class="modal-title">添加学员</div>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="title" class="col-sm-2 control-label">姓名:</label>
                <div class="col-sm-10">
                  <input v-model="newstu.name" id="title" type="text" class="form-control" placeholder="请输入图书名称">
                </div>
              </div>
              <div class="form-group">
                <label for="summary" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <input v-model="newstu.gender" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                </div>
              </div>
              <div class="form-group">
                <label for="uploaduser" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                  <input v-model="newstu.age" id="uploaduser" type="text" class="form-control" placeholder="请输入上传人">
                </div>
              </div>
              <div class="form-group">
                <label for="createdate" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                  <input v-model="newstu.telephone" id="createdate" type="text" class="form-control" placeholder="请输入上传时间">
                </div>
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input v-model="newstu.email" id="email" type="text" class="form-control" placeholder="请输入上传时间">
                </div>
              </div>
              <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">班级</label>
                <div class="col-sm-10">
                  <select id="categoryId" class="form-control" v-model="newstu.classid">
                    <option value="0">请选择班级</option>
                    <option v-for="item in classesList" :value="item.id">{{item.name}}</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" @click="hideModal()">关闭</button>
            <button class="btn btn-primary" @click="saveBook">保存</button>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
            stuList:{},
            classesList:{},
            newstu:{
                name:"",sex:"",gender:"",telephone:"",email:"",classid:"1"
            },
                addResult:""
            },
            methods:{
                addStu:function () {
                $("#mymodal").modal('show');
                },
                hideModal:function () {
                    $("#mymodal").modal('hide');
                },
                saveBook:function () {
                    axios.post("/addStu",this.newstu).then(res=>{
                        this.addResult=res.data;
                        if(this.addResult=="SUCCESS"){
                            alert("添加成功!");
                            this.hideModal();
                            axios.get("/seleStu").then(res=>{
                                this.stuList=res.data;
                            })
                        }else{
                            alert("添加失败!")
                        }
                    })
                }


            },
            mounted(){
                axios.get("/seleStu").then(res=>{
                    this.stuList=res.data;
                }),
                axios.get("/seleClass").then(res=>{
                    this.classesList=res.data;
                })
            }
    })
</script>